import { StoreOptions, MutationTree, ActionTree } from 'vuex'

export interface AppState{
  sidebarCollapsed: boolean,
  breadcrumbList: Array<Breadcrumb>,
  theme: Theme,
}

export interface Breadcrumb{
  title: string;
  url?: string;
  icon: string;
}

export interface Theme{
  background: string,
  color: string,
}

export default {
  namespaced: true,

  state: {
    sidebarCollapsed: false,
    breadcrumbList: [],
    theme: {
      background: '#487AF4',
      color: '#fff',
    }
  },

  mutations: {
    /**
     * 设置主题
     * @param state
     * @param param1
     */
    SET_THEME (state, { background = '#000', color = '#303133' }) {
      state.theme.background = background
      state.theme.color = color

      const _style = document.documentElement.style
      _style.setProperty('--background', background)
      _style.setProperty('--color', color)
    },

    /**
     * 设置面包屑
     * @param state
     * @param breadcrumb
     */
    SET_BREADCRUMB(state, breadcrumb: Breadcrumb[]) {
      state.breadcrumbList = breadcrumb
    },

    /**
     * 设置 collapsed
     * @param state
     */
    TOGGLE_COLLAPSED(state) {
      state.sidebarCollapsed = !state.sidebarCollapsed
    }

  } as MutationTree<AppState>,

  actions: {
  } as ActionTree<AppState, AppState>,

} as StoreOptions<AppState>
